<template>
  <div class="menu">
    <el-menu
      :default-active="this.$route.path"
      router
      background-color="#242834"
      text-color="#fff"
      active-text-color="#fff"
      class="el-menu-vertical-demo"
      style="min-height:100vh;overflow-x: hidden"
      unique-opened
      :collapse="isCollapse">
      <div v-if='!isCollapse' class="title">
        <img src="../assets/img/wineBjImg.png" alt="" class="img">
      </div>
      <div v-else class="title">
        <el-tooltip class="item" effect="dark" content="会员管理系统" placement="right-start">
          <span class="el-icon-more-outline"></span>
        </el-tooltip>
      </div>
      <template v-for="(item,index) in role">
        <el-submenu :index="item.path" v-if="Array.isArray(item.children)">
          <template slot="title">
            <i :class="item.icon"></i>
            <span>{{item.name}}</span>
          </template>
          <el-menu-item v-for="(self,idx) in item.children" :key="`${index}-${idx}`" :index="self.path">
            <i :class="self.icon?self.icon:''"></i>
            <span slot="title" style="display: flex;align-items: center;">
              <span v-if="!self.icon||self.icon!==''||self.icon!==null" style="margin-right: 5px">●</span>
              {{self.name}}
            </span>
          </el-menu-item>
        </el-submenu>
        <el-menu-item :index="item.path" v-if="!Array.isArray(item.children)">
          <i :class="item.icon"></i>
          <span slot="title">{{item.name}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script>
  import {mapState} from 'vuex';

  export default {
    name: "Menu",
    computed: {
      ...mapState(['isCollapse', 'role']),//获取激活菜单路由和菜单是否展开
    },
    created(){
      console.log(this.role)
    }
  }
</script>

<style scoped lang="scss">

  .el-menu {
    border: none;
  }

  /*.el-menu-vertical-demo .el-menu--collapse el-menu,*/
  .el-menu--collapse{
    width: 64px;
    background-color: $black !important;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 100vh;
    background-color: $black !important;
  }

  /*当前激活背景色*/
  .is-active {
    background: $blue !important;
  }

  /*当前激活字体颜色*/
  .is-active > span {
    color: #fff !important;
  }

  /*每项菜单字体颜色*/
  .el-submenu__title > span, .el-menu-item {
    color: #fff !important;
  }

  .el-menu-item:hover {
    /*background: #E4E7ED !important;*/
  }

  .title {
    color: white;
    height: 55px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    margin-top: 13px;
  }

  .title > span {
    font-size: 16px;
    color: #909399;
  }

  .img {
    width: 150px;
    height: 55px;
    display: block;
    margin: 5px auto 0 auto;
    cursor: pointer;
  }
</style>
